import { useRoutes, Navigate } from 'react-router-dom'

import Home from '../views/Home'
import Music from '../views/Music'
import MusicHot from '../views/Music/Hot'
import MusicNews from '../views/Music/News'
import ErrorPage from '../views/Error'
import Detail from '../views/Detail'

const RouterView = () => {
    const routes = useRoutes([
        {
            path: '/',
            element: <Home />
        }, {
            path: '/music',
            element: <Music />,
            children: [
                //路由重定向
                {
                    path: '/music',
                    element: <Navigate to="/music/news" />
                }, {
                    path: 'hot',
                    element: <MusicHot />
                }, {
                    path: 'news',
                    element: <MusicNews />
                }
            ]
        }, {
            path: '*',
            element: <ErrorPage />
        },
        // {
        //     path: '/detail',
        //     element: <Detail />
        // },
        {
            path: '/detail/:id',
            element: <Detail />
        }
    ])
    return routes
}

export default RouterView
